import React from 'react';
import { Button } from 'antd';
import { WeaDialog, WeaInput, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

export default class ParamDialog extends React.Component {
  input = React.createRef();
  state = { paramVal: '' };

  onSure = () => {
    const { onSure } = this.props;
    const { paramVal } = this.state;

    if (paramVal) {
      onSure(paramVal);
    } else {
      ReactDOM.findDOMNode(this.input.current).querySelector('input').focus();
    }
  }

  render () {
    const { visible, onSure, onCancel } = this.props;
    const { paramVal } = this.state;
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j5npik@onSure`} type="primary" onClick={this.onSure}>
        {getLabel('826', '确定')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ttlhmt@onCancel`} type="ghost" onClick={onCancel}>
        {getLabel(31129, '取消')}
      </Button>
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@zqh1u4`} 
        visible={visible}
        title={getLabel('520635','请输入要获取的参数名称')}
        icon={"icon-coms02-Data-center"}
        iconBgcolor="#1a57a0"
        style={{width: 450, height: 90}}
        buttons={buttons}
        onCancel={onCancel}
        className='wea-edc-param-dialog'
        parentClassName='wea-edc-param-parent'
      >
        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@13ff2i`} onChange={value => this.setState({ paramVal: value })} value={paramVal} ref={this.input}/>
      </WeaDialog>
    )
  }
}